<template>
    <div>
        <div v-if="value == ''"
            class="w-[40px] h-[40px] rounded--[4px] border-1 flex items-center justify-center cursor-pointer"
            @click="openModal">
            <PlusOutlined />
        </div>
        <div v-else @click="openModal"
            class="w-[40px] h-[40px] rounded--[4px] border-1 flex items-center justify-center cursor-pointer relative">
            <span class="!text-[20px] iconfont" :class="['icon-' + value]"></span>
            <div @click.stop="deleteIcon" class="absolute right-[-6px] top-[-6px] w-[14px] h-[14px] rounded-[50%] border-1 border-solid border-[#999] bg-[#EEEEEE] flex items-center justify-center cursor-pointer">
                <CloseOutlined class="text-[8px] text-[#999999]" />
            </div>
        </div>
        <a-modal v-model:open="open" :footer="null" :bodyStyle="{ padding: 0 }" :width="isMiniScreen ? 'auto' : '620px'"
            title="图标库">
            <div class="flex flex-wrap content-start h-[500px] overflow-y-auto">
                <div v-for="(item, index) in attachment.data" :key="index" class="mb-[10px]">
                    <div @click="selectIcon(item)" class="w-[60px] h-[60px] rounded-[4px] m-[3px] bg-[#f2f6fc] flex items-center justify-center cursor-pointer hover:(bg-[#000000] bg-opacity-60)">
                        <span class="!text-[24px] iconfont" :class="['icon-' + item.font_class]"></span>
                    </div>
                    <div class="w-[60px] text-xs text-[#333333] overflow-hidden overflow-ellipsis whitespace-nowrap text-center">{{ item.name }}</div>
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { PlusOutlined,CloseOutlined } from '@ant-design/icons-vue';

import iconList from '@/assets/iconfont/iconfont.json';

const emit = defineEmits(['update:modelValue', 'change']);

const prop = defineProps({
    modelValue: {
        type: String,
        default: ''
    },
})

const value = computed({
    get() {
        return prop.modelValue
    },
    set(value) {
        emit('update:modelValue', value)
    }
})

const isMiniScreen = window.innerWidth > 1000 ? false : true;


const attachment: Record<string, any> = reactive({
    loading: true,
    data: []
});

onMounted(() => {
    if (iconList.glyphs) {
        attachment.data = iconList.glyphs;
    }
})


const open = ref<boolean>(false);

// 打开弹窗
const openModal = () => {
    open.value = true;
};

/**
 * 选择文件
 */
const selectIcon = (data: any) => {
    // console.log(data.font_class)
    value.value = data.font_class;
    open.value = false;
}

// 删除ICON
const deleteIcon = () => {
    value.value = '';
}
</script>